<template>
  <div>
    <div class="chartsbg">
      <a-card>
        <div class="charts" id="chart1"></div>
      </a-card>
      <a-card>
        <div class="charts" id="chart2"></div>
      </a-card>
    </div>
    <FastTable
      title="状态"
      :tableHeaderList="columns"
      :tableSearchList="searchList"
      :tableFormList="formList"
      pageNumKey="page"
      pageSizeKey="size"
      :pageStart="0"
      :useCustomForm="false"
      :tableFormWidth="500"
      :listRequest="listRequest"
      :addRequest="addRequest"
      :editRequest="editRequest"
      :detailRequest="detailRequest"
      :deleteRequest="deleteRequest"
      :showLog="true"
      :handleListRequestParams="handleListRequestParams"
      @onWillSearch="onWillSearch"
      @onWillSearchReqeust="onWillSearchReqeust"
      @onDidSearch="onDidSearch"
      @onWillGetList="onWillGetList"
      @onWillGetListRequest="onWillGetListRequest"
      @onGetListSuccess="onGetListSuccess"
      @onGetListError="onGetListError"
      @onWillAdd="onWillAdd"
      @onAddSuccess="onAddSuccess"
      @onAddError="onAddError"
      @onWillEdit="onWillEdit"
      @onEditSuccess="onEditSuccess"
      @onEditError="onEditError"
      @onWillSaveReqeust="onWillSaveReqeust"
      @onWillDelete="onWillDelete"
      @onWillDeleteReqeust="onWillDeleteReqeust"
      @onDeleteSuccess="onDeleteSuccess"
      @onDeleteError="onDeleteError"
      @onFormPrefixClick="onFormPrefixClick"
      @onFormSuffixClick="onFormSuffixClick"
    >
      <template slot="tableCustomForm">
        <div></div>
      </template>
    </FastTable>
  </div>
</template>

<script>
// 导入mixin文件
import mixin from "./mixin";
import * as echarts from "echarts";
import { getMotion } from "@/api/ApiRequest";

export default {
  mixins: [mixin],
  name: "MotionPage", // 状态 状态
  data() {
    return {
      lineChart: null,
      barChart: null,
      list: [],
      scoreList: [],
    };
  },
  created() {
    this.init();
  },
  mounted() {
    this.lineChart = echarts.init(document.getElementById("chart1"));
    this.barChart = echarts.init(document.getElementById("chart2"));
    this.getMotionList();
  },
  methods: {
    async getMotionList() {
      let data = await getMotion({ page: 0, size: 100000 });
      this.list = data;

      this.initLineView();
      this.initBarView();
    },
    initLineView() {
      let mlist = [];
      let mvlist1 = [];
      let mvlist2 = [];
      let mvlist3 = [];
      this.list.map((it) => {
        it.title = it.title.split("T")[0]

        mlist.push(it.title);

        mvlist1.push({
          name: it.title,
          value: it.fear,
        });

        mvlist2.push({
          name: it.title,
          value: it.normal,
        });

        mvlist3.push({
          name: it.title,
          value: it.score,
        });
      });

      this.lineChart.setOption({
        title: {
          text: "状态数据",
          textStyle: {
            color: "black", // 标题颜色
            fontSize: 14, // 默认值：18
            fontStyle: "normal", // normal:正常风格（默认值）,italic:倾斜体
            fontWeight: "bold", // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 1,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        xAxis: {
          show: true,
          axisTick: {
            show: false,
            length: 20, // 竖线的长度
          },
          data: mlist,
        },
        yAxis: {
          axisLabel: {
            show: true,
          },
        },
        series: [
          {
            name: "fear",
            type: "line", // 设置图表类型为柱状
            data: mvlist1,
          },
          {
            name: "normal",
            type: "line", // 设置图表类型为柱状
            data: mvlist2,
          },
          {
            name: "score",
            type: "line", // 设置图表类型为柱状
            data: mvlist3,
          },
        ],
      });

      let self = this;
      this.lineChart.on("click", function (params) {
        self.getCreditMonthList(params.name);
      });
    },
    initBarView() {
      let mlist = [];
      let mvlist1 = [];
      this.list.map((it) => {
        mlist.push(it.title);

        mvlist1.push({
          name: it.title,
          value: it.score,
        });
      });

      this.barChart.setOption({
        title: {
          text: "状态变化",
          textStyle: {
            color: "black", // 标题颜色
            fontSize: 14, // 默认值：18
            fontStyle: "normal", // normal:正常风格（默认值）,italic:倾斜体
            fontWeight: "bold", // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 1,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        xAxis: {
          show: true,
          axisTick: {
            show: false,
            length: 20, // 竖线的长度
          },
          data: mlist,
        },
        yAxis: {
          axisLabel: {
            show: true,
          },
        },
        series: [
          {
            type: "bar", // 设置图表类型为柱状
            data: mvlist1,
          },
        ],
      });

      let self = this;
      this.lineChart.on("click", function (params) {
        self.getCreditMonthList(params.name);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.charts {
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}
.chartsbg {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
